<template>
    <el-container>
        <el-header class="home-header">
            <el-row>
                <el-col :span="22">
                    {{ appName }}
                </el-col>
                <el-col :span="2" class="home-header-menu-container">
                    <el-dropdown :hide-on-click="false" trigger="click" class="home-header-menu" @command="useMenuCommand">
                        <span class="home-header-menu">
                          <el-avatar style="margin-right: 10px" icon="UserFilled" :size="30"/>
                          {{ userName }}
                          <el-icon class="el-icon--right"><arrow-down/></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                                <el-dropdown-item command="modelDemo">弹窗样例</el-dropdown-item>
                                <el-dropdown-item command="loadingDemo">Loading样例</el-dropdown-item>
                                <el-dropdown-item command="logOut" divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside class="home-side">
                <el-menu
                    :default-active="currentMenuIndex"
                    active-text-color="#ffffff"
                    active-background-color="#0000000"
                    background-color="#001529"
                    class="el-menu-vertical-demo"
                    text-color="#ffffffa6">
                    <el-sub-menu v-for="menu in menus" :key="menu.index" :index="menu.index">
                        <template #title>
                            <el-icon>
                                <component :is="menu.icon"/>
                            </el-icon>
                            <span>{{ menu.title }}</span>
                        </template>

                        <el-menu-item
                            v-for="childMenu in menu.children"
                            :key="childMenu.index"
                            :index="childMenu.index"
                            @click="navigateTo(childMenu)">
                            <!-- 有图标子菜单 -->
                            <template #title v-if="childMenu.icon">
                                <el-icon>
                                    <component :is="childMenu.icon"/>
                                </el-icon>
                                <span>{{ childMenu.title }}</span>
                            </template>
                            <!-- 无图标子菜单 -->
                            <span v-if="!childMenu.icon">{{ childMenu.title }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main class="home-main">
                <el-tabs
                    type="card"
                    :model-value="currentMenuIndex"
                    @tabChange="menuTabChanged"
                    @tabRemove="deactiveMenu"
                >
                    <el-tab-pane
                        v-for="activeMenu in activeMenus"
                        :label="activeMenu.title"
                        :name="activeMenu.index"
                        :closable="activeMenu.isLeaf"
                    />
                </el-tabs>
                <div class="home-main-content">
                    <com-keep-alive-router-view/>
                </div>
            </el-main>
        </el-container>
        <el-footer class="home-footer">
            <el-row>
                <el-col :span="12"> 当前用户：{{ userName }}</el-col>
                <el-col :offset="9" :span="3" style="text-align: right">
                    {{ currentTime }}
                </el-col>
            </el-row>
        </el-footer>
    </el-container>

    <com-pop title="标题" v-model:visible="modalVisible">
        弹窗样例
    </com-pop>
</template>

<script setup lang="ts">
    import menuHook from '@/hooks/home/MenuHook'
    import { getCurrentInstance } from 'vue'
    import ComKeepAliveRouterView from '@/components/com-keep-alive-router-view/com-keep-alive-router-view.vue'
    import ComPop from "@/components/com-pop/com-pop.vue";

    defineOptions({
        name: 'IndexView',
    })

    //region # 属性

    // 应用实例
    const { proxy }:any = getCurrentInstance()

    // 当前用户
    let appName:Ref<string> = ref('')

    // 当前用户
    let userName:Ref<string> = ref('')

    // 当前时间
    let currentTime:Ref<string> = ref('')

    // 模态显示状态
    let modalVisible:Ref<boolean> = ref(false)

    //endregion

    //region # Hooks

    // 菜单Hook
    const { menus, activeMenus, currentMenuIndex, initMenu, initHomeActiveMenu, navigateTo, menuTabChanged, deactiveMenu, } = menuHook()

    //endregion

    //region # 方法

    // Action

    /**
     * 用户菜单命令
     * */
    function useMenuCommand(command:string | number | object) {

        switch (command) {
            case 'changePwd':

                proxy.$service.toast.success("修改密码成功！")
                break;
            case 'modelDemo':
                showModal()
                break;
            case 'loadingDemo':
                proxy.$service.loading.busy("Loading 样例...")
                setTimeout(() => {
                    proxy.$service.loading.idle();
                },500)
                break;
            case 'logOut':
                // TODO 退出登录

                proxy.$router.push('/')
                break;
        }

    }

    // Private

    /**
     * 显示弹窗
     * */
    function showModal() {
        modalVisible.value = true
    }

    /**
     * 隐藏弹窗
     * */
    function hideModal() {
        modalVisible.value = false
    }

    //region 初始化时间
    /**
     * 初始化时间
     * */
    function initTime():void {
        setInterval(() => {
            const now = new Date()
            currentTime.value = now.toDateTimeString()
        }, 1000)
    }

    //endregion

    //endregion

    //region # 事件

    /**
     * 加载完毕
     * */
    onMounted(async () => {
        appName.value = proxy!.$appConfig.appName
        userName.value = proxy.$storage.pinia.loginInfo.name

        initTime()
        initMenu()
        initHomeActiveMenu()
    })

    //endregion
</script>

<style scoped lang="less">
    @import 'IndexView.less';
</style>
